React Navigation এবং Multi-Screen অ্যাপ্লিকেশন তৈরি

React Native অ্যাপে একাধিক স্ক্রীন বা পৃষ্ঠার জন্য নেভিগেশন যোগ করতে, React Navigation লাইব্রেরি ব্যবহৃত হয়। React Navigation হলো React Native-এর জন্য একটি লাইব্রেরি, যা অ্যাপের মধ্যে স্ক্রীনগুলির মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। এই গাইডে, আমরা React Navigation ব্যবহার করে একটি multi-screen অ্যাপ্লিকেশন তৈরি করার পদক্ষেপগুলো দেখাবো।

React Navigation ইনস্টলেশন এবং সেটআপ

React Navigation ব্যবহার করতে প্রথমে কিছু প্যাকেজ ইনস্টল করতে হবে। এখানে আমরা স্ট্যাক নেভিগেশন ব্যবহার করব, যার মাধ্যমে এক স্ক্রীন থেকে অন্য স্ক্রীনে সহজভাবে নেভিগেট করা যাবে।

১. React Navigation প্যাকেজ ইনস্টল করুন

প্রথমে React Navigation এবং অন্যান্য প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ডগুলো রান করুন:

npm install @react-navigation/native

এছাড়া, নেভিগেশন কাজ করার জন্য কিছু ডিপেনডেন্সি ইনস্টল করতে হবে। টার্মিনালে এই কমান্ডটি রান করুন:

npm install react-native-screens react-native-safe-area-context

এছাড়া, Stack Navigation ব্যবহার করতে হলে @react-navigation/stack প্যাকেজটি ইনস্টল করতে হবে:

npm install @react-navigation/stack

২. React Navigation এর জন্য প্রয়োজনীয় ডিপেনডেন্সি ইনস্টলেশন

নেভিগেশন পরিচালনার জন্য react-native-gesture-handler এবং react-native-reanimated প্যাকেজগুলিও ইনস্টল করতে হবে। টার্মিনালে নিচের কমান্ডগুলো রান করুন:

npm install react-native-gesture-handler react-native-reanimated

এরপর, iOS এ কাজ করার জন্য Xcode প্রজেক্টে কিছু সেটআপ করতে হবে। যদি আপনি iOS ডিভাইসে কাজ করতে চান, তাহলে এই কমান্ডটি রান করুন:

cd ios && pod install && cd ..

React Navigation সেটআপ

প্রথমে App.js ফাইলটি খুলুন এবং NavigationContainer কম্পোনেন্টটি React Navigation থেকে ইম্পোর্ট করুন। এটি নেভিগেশন কন্টেইনার হিসেবে কাজ করবে এবং আপনার অ্যাপের নেভিগেশন ব্যবস্থাকে নিয়ন্ত্রণ করবে।

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

// স্ক্রীনগুলো
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

এখানে, আমরা একটি Stack Navigator তৈরি করেছি যা HomeScreen এবং DetailsScreen স্ক্রীন দুটি নির্ধারণ করেছে।

স্ক্রীন তৈরি করা

১. HomeScreen.js

প্রথম স্ক্রীনটি হবে HomeScreen, যা আমাদের অ্যাপের হোম স্ক্রীন হিসেবে কাজ করবে এবং একটি বাটন থাকবে, যা ব্যবহারকারীকে DetailsScreen-এ নিয়ে যাবে।

HomeScreen.js ফাইলে নিচের কোডটি লিখুন:

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default HomeScreen;

এখানে, navigation.navigate('Details') ফাংশনটি ব্যবহার করে আমরা হোম স্ক্রীন থেকে DetailsScreen এ নেভিগেট করছি।

২. DetailsScreen.js

এখন একটি নতুন স্ক্রীন তৈরি করুন যার নাম DetailsScreen হবে। এই স্ক্রীনে কিছু টেক্সট থাকবে যাতে ব্যবহারকারী জানতে পারে যে তারা ডিটেইলস স্ক্রীনে এসেছে।

DetailsScreen.js ফাইলে নিচের কোডটি লিখুন:

import React from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

const DetailsScreen = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Details Screen</Text>
      <Button
        title="Go Back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f9f9f9',
  },
  text: {
    fontSize: 20,
    marginBottom: 20,
  },
});

export default DetailsScreen;

এখানে, navigation.goBack() ফাংশন ব্যবহার করে আমরা DetailsScreen থেকে পূর্ববর্তী স্ক্রীনে ফিরে আসার ব্যবস্থা করেছি।

অ্যাপ রান করা

এখন আপনার অ্যাপটি Android বা iOS ডিভাইসে রান করতে পারেন।

• Android এ রান করতে:

npx react-native run-android

• iOS (MacOS এ) এ রান করতে:

npx react-native run-ios

আপনার অ্যাপটি চালু হলে, আপনি হোম স্ক্রীনে গিয়ে "Go to Details" বাটনে ক্লিক করলে আপনি DetailsScreen-এ চলে যাবেন এবং সেখানে আবার "Go Back" বাটনে ক্লিক করলে ফিরে আসবেন।

সারাংশ

এভাবে, আপনি React Native ব্যবহার করে একটি multi-screen অ্যাপ্লিকেশন তৈরি করতে পারেন। এখানে আমরা React Navigation এর Stack Navigator ব্যবহার করেছি, যা আপনাকে স্ক্রীনগুলো মধ্যে সহজভাবে নেভিগেট করতে সাহায্য করে। এটি প্রাথমিক অ্যাপ ডেভেলপমেন্টের জন্য খুবই কার্যকরী এবং সহজ।

React Navigation হল React Native অ্যাপ্লিকেশনের জন্য একটি জনপ্রিয় লাইব্রেরি যা আপনাকে নেভিগেশন পরিচালনা করতে সাহায্য করে। এটি বিভিন্ন ধরনের নেভিগেশন স্ট্যাক (Stack), ট্যাব (Tab), সাইড মেনু (Drawer) ইত্যাদি সমর্থন করে। এখানে আমি বিস্তারিতভাবে React Navigation ইনস্টল এবং কনফিগার করার প্রক্রিয়া বর্ণনা করব।

প্রথম ধাপ: প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করা

React Navigation ব্যবহার করতে হলে প্রথমে কিছু প্যাকেজ ইনস্টল করতে হবে। নীচে টার্মিনালে একে একে কমান্ডগুলি চালিয়ে সমস্ত প্যাকেজ ইনস্টল করুন:

১. React Navigation এর মূল প্যাকেজ ইনস্টল করা

npm install @react-navigation/native

২. নেভিগেশন স্ট্যাকের জন্য প্যাকেজ ইনস্টল করা (Stack Navigator)

npm install @react-navigation/stack

৩. React Native Gesture Handler এবং React Native Reanimated ইনস্টল করা

React Navigation সঠিকভাবে কাজ করতে react-native-gesture-handler এবং react-native-reanimated প্রয়োজন:

npm install react-native-gesture-handler react-native-reanimated

(MacOS/Linux) যদি আপনি react-native-reanimated ব্যবহার করেন, তবে আপনি babel plugin ইনস্টল করতে পারেন:

npm install babel-plugin-reanimated

৪. React Native Screens ইনস্টল করা

React Navigation আরো ভালো পারফরম্যান্সের জন্য react-native-screens লাইব্রেরি ব্যবহার করে:

npm install react-native-screens

৫. React Native Linking এবং অ্যাপ্লিকেশন লিঙ্কিং (যদি প্রয়োজন হয়)

নিচের কমান্ডটি চালিয়ে React Native অ্যাপ্লিকেশনটির লিঙ্কিং নিশ্চিত করুন:

npx react-native link

দ্বিতীয় ধাপ: React Navigation কনফিগার করা

React Navigation কনফিগার করতে নীচের ধাপগুলো অনুসরণ করুন:

১. App.js ফাইলে React Navigation এবং স্ট্যাক নেভিগেটর সেটআপ করা

এখন আপনার অ্যাপের App.js ফাইলে নেভিগেটর কনফিগার করুন। নিচে একটি সহজ উদাহরণ দেয়া হলো যেখানে স্ট্যাক নেভিগেটর ব্যবহার করা হয়েছে:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native'; // এটি মূল কন্টেইনার
import { createStackNavigator } from '@react-navigation/stack'; // স্ট্যাক নেভিগেটর

// স্ক্রীন কম্পোনেন্টস
import HomeScreen from './screens/HomeScreen'; // আপনার HomeScreen কম্পোনেন্ট
import DetailsScreen from './screens/DetailsScreen'; // আপনার DetailsScreen কম্পোনেন্ট

// স্ট্যাক নেভিগেটর তৈরি করা
const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

এখানে আমরা একটি Stack Navigator তৈরি করেছি, যা দুটি স্ক্রীন (Home এবং Details) নেভিগেট করতে সাহায্য করবে।

তৃতীয় ধাপ: স্ক্রীন কম্পোনেন্ট তৈরি করা

এখন আমরা দুটি স্ক্রীন তৈরি করব, HomeScreen.js এবং DetailsScreen.js।

HomeScreen.js:

import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
};

export default HomeScreen;

DetailsScreen.js:

import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => {
  return (
    <View>
      <Text>Details Screen</Text>
    </View>
  );
};

export default DetailsScreen;

চতুর্থ ধাপ: React Navigation এর অন্যান্য নেভিগেটর ব্যবহার করা (যদি প্রয়োজন হয়)

React Navigation আরো ধরণের নেভিগেটর সমর্থন করে, যেমন Drawer Navigator এবং Tab Navigator। নিচে এইগুলো কনফিগার করার প্রক্রিয়া বর্ণনা করা হলো:

1. Tab Navigator

npm install @react-navigation/bottom-tabs

এরপর, App.js ফাইলে Tab Navigator ব্যবহার করুন:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Details" component={DetailsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

2. Drawer Navigator

npm install @react-navigation/drawer

এরপর, App.js ফাইলে Drawer Navigator ব্যবহার করুন:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Details" component={DetailsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

পঞ্চম ধাপ: React Navigation এর কাস্টমাইজেশন

React Navigation বিভিন্ন কাস্টমাইজেশন অপশন প্রদান করে, যেমন:

1. নেভিগেশন স্ট্যাকের হেডার কাস্টমাইজেশন:
   আপনি স্ট্যাক নেভিগেটরের হেডার কাস্টমাইজ করতে পারেন:

<Stack.Screen
  name="Home"
  component={HomeScreen}
  options={{ headerTitle: 'Custom Home Title' }}
/>

2. নেভিগেশন ট্রানজিশন কাস্টমাইজেশন:
   আপনি বিভিন্ন নেভিগেশন ট্রানজিশন স্টাইল কাস্টমাইজ করতে পারেন, যেমন:

<Stack.Navigator
  screenOptions={{
    headerShown: false, // হেডার আড়াল করতে
    gestureEnabled: true, // পৃষ্ঠা স্লাইড ট্রানজিশন চালু করতে
  }}
>

সারাংশ

React Navigation একটি শক্তিশালী লাইব্রেরি যা React Native অ্যাপ্লিকেশনে নেভিগেশন পরিচালনার জন্য ব্যবহৃত হয়। এটি বিভিন্ন ধরনের নেভিগেশন স্ট্যাক (Stack), ট্যাব (Tab), সাইড মেনু (Drawer) সমর্থন করে। React Navigation ইনস্টল এবং কনফিগার করা সহজ, এবং এটি বিভিন্ন কাস্টমাইজেশন এবং ফিচারের মাধ্যমে আপনার অ্যাপের নেভিগেশন উন্নত করতে সাহায্য করে।

Stack Navigation এবং Drawer Navigation হল React Navigation-এ ব্যবহৃত দুটি জনপ্রিয় নেভিগেশন পদ্ধতি। প্রতিটি পদ্ধতির লক্ষ্য আলাদা এবং বিভিন্ন পরিস্থিতিতে ব্যবহৃত হয়। নিচে এই দুটি নেভিগেশনের মধ্যে পার্থক্য এবং তাদের ব্যবহার তুলে ধরা হয়েছে:

১. Stack Navigation

Stack Navigation হল এমন একটি নেভিগেশন পদ্ধতি যেখানে একে অপরের উপর পৃষ্ঠাগুলির স্তক (stack) তৈরি করা হয়। প্রতিটি নতুন স্ক্রীন সেরকম আগের স্ক্রীনের উপর স্ট্যাক হয়, এবং পিছনে ফিরে যাওয়ার (back) অপশন থাকে। এটি মোবাইল অ্যাপ্লিকেশনে সাধারণত ব্যবহৃত হয়, যেখানে আপনি একটি স্ক্রীন থেকে অন্য স্ক্রীনে যেতে পারেন এবং আগের স্ক্রীনে ফিরে যেতে পারবেন।

মূল বৈশিষ্ট্যসমূহ:

• পৃষ্ঠার স্তক (stack): নতুন স্ক্রীনকে আগের স্ক্রীনের উপর স্ট্যাক করা হয়।
• পিছনে ফিরে যাওয়া (Back): আপনি সাধারণত একটি স্ক্রীন থেকে আরেকটি স্ক্রীনে যেতে পারেন এবং আগের স্ক্রীনে ফিরে যাওয়ার জন্য একটি ব্যাক বাটন থাকে।
• রুটের সমন্বয়: প্রতিটি স্ক্রীন একটি নির্দিষ্ট রুট হিসাবে সংজ্ঞায়িত হয় এবং আপনি পুশ এবং পপ অপারেশন দিয়ে স্ক্রীন পরিচালনা করতে পারেন।
• উদাহরণ: লগইন, হোম, ডিটেইল পেজ ইত্যাদি।

উদাহরণ:

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

২. Drawer Navigation

Drawer Navigation হল একটি সাইড নেভিগেশন প্যানেল, যা সাধারণত একটি স্ক্রীনের পাশ থেকে স্লাইড করে আসে। এটি মোবাইল অ্যাপ্লিকেশন এবং ডেস্কটপ অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়, যেখানে ব্যবহারকারীকে নেভিগেশন মেনু অ্যাক্সেস করতে দেয়। এটি সাধারণত অ্যাপের প্রধান স্ক্রীনের সাথে সম্পর্কিত অন্যান্য স্ক্রীন বা ফিচারের জন্য ব্যবহার করা হয়।

মূল বৈশিষ্ট্যসমূহ:

• সাইড নেভিগেশন মেনু: সাধারণত স্ক্রীনের একপাশ থেকে আউট স্লাইড করে এবং এতে অ্যাপের অন্যান্য স্ক্রীন বা ফিচার থাকে।
• বিভিন্ন স্ক্রীন সরলভাবে অ্যাক্সেস করা: ব্যবহারকারী অ্যাপের বিভিন্ন অংশে সহজেই নেভিগেট করতে পারে।
• টগল এবং স্বাইপ: আপনি এক্সপ্যান্ড বা টগল করার জন্য মেনুটি স্লাইড করে আনতে পারেন, অথবা স্বাইপিং দিয়ে মেনু চালু করতে পারেন।
• উদাহরণ: অ্যাপের হোম, প্রোফাইল, সেটিংস, লগআউট ইত্যাদি অপশন।

উদাহরণ:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Home">
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Profile" component={ProfileScreen} />
    </Drawer.Navigator>
  );
}

Stack Navigation এবং Drawer Navigation এর মধ্যে পার্থক্য

কোনটি ব্যবহার করবেন?

• Stack Navigation ব্যবহার করুন যদি আপনি এমন অ্যাপ তৈরি করছেন যেখানে একটির পর এক স্ক্রীনে যেতে হবে (যেমন লগইন, হোম পেজ, ডিটেইলস পেজ) এবং ব্যবহারকারীরা আগের স্ক্রীনে ফিরে যেতে পারবেন এমন ফ্লো প্রয়োজন।
• Drawer Navigation ব্যবহার করুন যদি আপনার অ্যাপে বেশ কয়েকটি স্ক্রীন বা ফিচার থাকে এবং আপনি সেগুলি একটি সাইড মেনু থেকে অ্যাক্সেস করতে চান। এটি বিশেষভাবে উপযুক্ত যখন অ্যাপের নেভিগেশন মেনুতে অনেক অপশন থাকে।

এটা বলা যায় যে, আপনি যদি Stack Navigation কে Drawer Navigation এর সাথে একত্রে ব্যবহার করেন, তাহলে আপনার অ্যাপের নেভিগেশন আরও শক্তিশালী এবং ব্যবহারকারীর জন্য সোজা ও সুবিধাজনক হয়ে উঠবে।

React Native অ্যাপে নেভিগেশন খুবই গুরুত্বপূর্ণ। বিভিন্ন স্ক্রীনে ব্যবহারকারীকে পরিচালনা করার জন্য নেভিগেশন সিস্টেম ব্যবহার করা হয়। React Navigation লাইব্রেরি React Native অ্যাপে বিভিন্ন ধরনের নেভিগেশন পরিচালনা করতে সহায়ক, যেমন Bottom Tab Navigator এবং Custom Navigators।

নিচে Bottom Tab Navigator এবং Custom Navigators এর ব্যবহার এবং কাস্টমাইজেশন নিয়ে বিস্তারিত আলোচনা করা হয়েছে।

1. Bottom Tab Navigator

Bottom Tab Navigator একটি জনপ্রিয় নেভিগেশন প্যাটার্ন, যেখানে স্ক্রীনগুলির মধ্যে স্যুইচ করতে একটি নেভিগেশন বার স্ক্রীনের নিচে থাকে। সাধারণত এটি অ্যাপের বিভিন্ন প্রধান বিভাগে নেভিগেট করার জন্য ব্যবহৃত হয়।

ইনস্টলেশন

প্রথমে আপনাকে react-navigation এবং react-navigation-tabs ইনস্টল করতে হবে:

npm install @react-navigation/native @react-navigation/bottom-tabs

এছাড়াও, আপনি react-native-gesture-handler এবং react-native-reanimated লাইব্রেরি ইনস্টল করতে পারেন, যেগুলি নেভিগেশন চলাকালীন অ্যানিমেশন এবং গেস্টার সাপোর্টে সহায়ক।

npm install react-native-gesture-handler react-native-reanimated

নেভিগেশন সেটআপ

BottomTabNavigator ব্যবহারের জন্য আপনাকে প্রথমে নেভিগেশন কনটেইনার সেটআপ করতে হবে এবং তারপর ট্যাব নেভিগেটর তৈরি করতে হবে:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './screens/HomeScreen'; // আপনার স্ক্রীন অনুযায়ী
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

এখানে, Tab.Navigator ব্যবহৃত হয়েছে যেখানে দুটি স্ক্রীন যুক্ত করা হয়েছে, Home এবং Settings।

অ্যাডভান্সড কাস্টমাইজেশন

React Navigation এর Bottom Tab Navigator কাস্টমাইজ করা যায়। আপনি আইকন, স্টাইল, এবং নেভিগেশন বারের অ্যানিমেশন কাস্টমাইজ করতে পারেন।

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Home') {
            iconName = focused ? 'ios-home' : 'ios-home-outline';
          } else if (route.name === 'Settings') {
            iconName = focused ? 'ios-settings' : 'ios-settings-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyTabs />
    </NavigationContainer>
  );
}

এখানে, Ionicons লাইব্রেরি ব্যবহার করা হয়েছে আইকন সেট করার জন্য, এবং স্ক্রীনের অ্যাকটিভ এবং ইনঅ্যাকটিভ ট্যাবগুলির জন্য আলাদা রঙ ব্যবহার করা হয়েছে।

2. Custom Navigators

Custom Navigators হল এমন নেভিগেশন সিস্টেম যা ডেভেলপার নিজে তৈরি করে এবং তার প্রয়োজন অনুযায়ী কাস্টমাইজ করে। React Navigation এ আপনি Stack, Tab, Drawer বা অন্য যে কোন নেভিগেটর কাস্টমাইজ করতে পারেন, অথবা সম্পূর্ণ নতুন কাস্টম নেভিগেশন তৈরি করতে পারেন।

Custom Stack Navigator

একটি Custom Stack Navigator তৈরি করতে, প্রথমে createStackNavigator ব্যবহার করে একটি স্ট্যাক নেভিগেটর তৈরি করুন:

npm install @react-navigation/stack

এবং তারপরে আপনি একটি কাস্টম স্ট্যাক নেভিগেটর তৈরি করতে পারেন:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

const Stack = createStackNavigator();

function MyStack() {
  return (
    <Stack.Navigator
      initialRouteName="Home"
      screenOptions={{
        headerStyle: { backgroundColor: '#f4511e' },
        headerTintColor: '#fff',
        headerTitleStyle: { fontWeight: 'bold' },
      }}
    >
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
    </Stack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

এখানে, headerStyle, headerTintColor, এবং headerTitleStyle কাস্টমাইজ করে একটি কাস্টম স্ট্যাক নেভিগেটর তৈরি করা হয়েছে।

Custom Drawer Navigator

আপনি চাইলে Drawer Navigator কাস্টমাইজ করতে পারেন এবং একটি কাস্টম সাইড মেনু তৈরি করতে পারেন:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import HomeScreen from './screens/HomeScreen';
import SettingsScreen from './screens/SettingsScreen';

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      screenOptions={{
        headerStyle: { backgroundColor: '#42f44b' },
        drawerStyle: {
          backgroundColor: '#f0f0f0',
          width: 240,
        },
      }}
    >
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

এখানে, Drawer.Navigator এর মাধ্যমে সাইড মেনু তৈরি করা হয়েছে এবং drawerStyle ব্যবহার করে সাইড মেনুর স্টাইল কাস্টমাইজ করা হয়েছে।

সারাংশ

• Bottom Tab Navigator ব্যবহার করে স্ক্রীনগুলির মধ্যে নেভিগেট করতে পারেন, যেখানে স্ক্রীনের নিচে ট্যাব বার থাকে।
• Custom Navigators আপনাকে নিজের নেভিগেশন প্যাটার্ন তৈরি করতে সহায়ক, যেখানে আপনি নেভিগেশন কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি Stack, Drawer, বা আপনার নিজের কাস্টম নেভিগেশন সিস্টেম তৈরি করতে পারেন।

React Navigation-এর মাধ্যমে, আপনি বিভিন্ন ধরণের নেভিগেশন সিস্টেম তৈরি করতে পারেন এবং প্রয়োজন অনুসারে নেভিগেশন প্যাটার্ন কাস্টমাইজ করতে পারেন, যা আপনার অ্যাপের ইউজার এক্সপেরিয়েন্সকে আরও উন্নত করে।

React Native অ্যাপ্লিকেশনে বিভিন্ন স্ক্রীনের মধ্যে ডেটা পাস করার জন্য React Navigation লাইব্রেরি ব্যবহৃত হয়। React Navigation এর মাধ্যমে আপনি স্ক্রীনের মধ্যে ডেটা পাস করতে পারেন এবং বিভিন্ন স্ক্রীনে পারামিটার (Route Parameters) পাঠাতে পারেন। নিচে React Navigation ব্যবহার করে Screen এর মধ্যে ডেটা পাস এবং Route Parameters এর ব্যবহার বর্ণনা করা হয়েছে।

React Navigation সেটআপ

প্রথমে, React Navigation লাইব্রেরি ইনস্টল করতে হবে। যদি আপনি এটি ইতিমধ্যেই ইনস্টল না করে থাকেন, তবে নিচের কমান্ডটি ব্যবহার করে ইনস্টল করতে পারেন:

npm install @react-navigation/native
npm install @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

এবং তারপর, react-native-gesture-handler এবং react-native-reanimated ইনস্টল করতে হবে যদি আপনার প্রকল্পে ইতিমধ্যে না থাকে।

npm install react-native-gesture-handler react-native-reanimated

এখন React Navigation সঠিকভাবে সেটআপ হয়ে গেলে, আপনি স্ক্রীনগুলোর মধ্যে ডেটা পাস করতে এবং Route Parameters ব্যবহার করতে পারবেন।

Screen এর মধ্যে ডেটা পাস করা

React Navigation ব্যবহার করে স্ক্রীনের মধ্যে ডেটা পাস করার জন্য navigation.navigate() এবং route.params ব্যবহার করা হয়। এখানে আমরা দেখব কীভাবে একটি স্ক্রীন থেকে অন্য স্ক্রীনে ডেটা পাঠানো এবং গ্রহণ করা যায়।

১. ডেটা পাঠানো (Passing Data)

Screen 1 (HomeScreen) থেকে Screen 2 (DetailsScreen) এ ডেটা পাঠানো হবে।

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

const HomeScreen = ({ navigation }) => {
  const dataToPass = {
    name: 'John Doe',
    age: 25,
  };

  return (
    <View>
      <Text>Welcome to Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => {
          // Passing data via route params
          navigation.navigate('Details', { userData: dataToPass });
        }}
      />
    </View>
  );
};

export default HomeScreen;

এই কোডে, আমরা HomeScreen থেকে DetailsScreen এ একটি অবজেক্ট (যেমন userData) পাঠাচ্ছি।

২. ডেটা গ্রহণ (Receiving Data)

DetailsScreen এ route.params ব্যবহার করে ডেটা গ্রহণ করা হবে।

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = ({ route }) => {
  const { userData } = route.params;  // Receiving data passed via route params

  return (
    <View>
      <Text>Name: {userData.name}</Text>
      <Text>Age: {userData.age}</Text>
    </View>
  );
};

export default DetailsScreen;

এখানে, আমরা route.params এর মাধ্যমে HomeScreen থেকে পাঠানো ডেটা গ্রহণ করছি এবং সেগুলি UI তে প্রদর্শন করছি।

Route Parameters ব্যবহার

Route Parameters হল URL এর অংশ যেখানে ডাইনামিক ডেটা পাঠানো হয়। React Navigation এর মাধ্যমে স্ক্রীনগুলির মধ্যে URL বা Route Parameter পাস করা যায়, যা URL এর অংশ হিসেবে কাজ করে।

১. Route Parameter পাঠানো (Passing Route Parameters)

React Navigation এর Stack Navigator ব্যবহৃত হলে, আপনি Route Parameters এইভাবে পাঠাতে পারেন।

// HomeScreen.js
import React from 'react';
import { Button, View, Text } from 'react-native';

const HomeScreen = ({ navigation }) => {
  return (
    <View>
      <Text>Home Screen</Text>
      <Button
        title="Go to Profile"
        onPress={() => {
          // Passing route parameters
          navigation.navigate('Profile', { userId: '1234', username: 'johndoe' });
        }}
      />
    </View>
  );
};

export default HomeScreen;

এই উদাহরণে, আমরা userId এবং username নামক Route Parameters পাঠাচ্ছি।

২. Route Parameter গ্রহণ (Receiving Route Parameters)

যখন ProfileScreen এ userId এবং username Parameters পৌঁছাবে, তখন আমরা সেগুলি route.params থেকে গ্রহণ করতে পারব।

// ProfileScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const ProfileScreen = ({ route }) => {
  const { userId, username } = route.params;  // Receiving route parameters

  return (
    <View>
      <Text>User ID: {userId}</Text>
      <Text>Username: {username}</Text>
    </View>
  );
};

export default ProfileScreen;

এখানে, আমরা route.params ব্যবহার করে HomeScreen থেকে পাঠানো userId এবং username গ্রহণ করছি এবং UI তে প্রদর্শন করছি।

Stack Navigator কনফিগারেশন

এখন, উল্লিখিত HomeScreen এবং ProfileScreen স্ক্রীনগুলির মধ্যে নেভিগেশন কনফিগার করতে হবে।

// App.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

এখানে, আমরা createStackNavigator ব্যবহার করে HomeScreen এবং ProfileScreen এর মধ্যে নেভিগেশন সেটআপ করেছি।

সারাংশ

• Screen এর মধ্যে ডেটা পাস করা: React Navigation ব্যবহার করে navigation.navigate() এর মাধ্যমে স্ক্রীনগুলির মধ্যে ডেটা পাস করা হয় এবং route.params ব্যবহার করে ডেটা গ্রহণ করা হয়।
• Route Parameters: Route Parameters হল ডাইনামিক ডেটা যা URL-এর অংশ হিসেবে স্ক্রীনগুলিতে পাঠানো হয়। React Navigation এ navigation.navigate() ব্যবহার করে Route Parameters পাঠানো হয় এবং route.params দিয়ে সেগুলি গ্রহণ করা হয়।

এই প্রক্রিয়া অনুসরণ করে, আপনি React Native অ্যাপ্লিকেশনে স্ক্রীনগুলির মধ্যে ডেটা সঞ্চালন করতে এবং পারামিটার ব্যবহার করতে পারবেন।